<script setup>
import { ref, onMounted, watch } from 'vue'
import NavComponent from './nav-component.vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { hangarDetail } from '@/api'
const airStore = useAirStore()
const { AirFlight, FocusAirId, showHangarList, hangarInfo } = storeToRefs(airStore)
const props = defineProps(['operationData'])

const currentId = ref('')
const focusAir = (item) => {
  if (currentId.value == item.name) {
    currentId.value = ''
    __g.customObject.focus('air-' + item.name, 2000)
    FocusAirId.value = item.name
  } else {
    currentId.value = item.name
    __g.customObject.focus('air-' + item.name, -1)
    FocusAirId.value = item.name
  }
}

const airList = ref([])
onMounted(() => {
  for (let i in AirFlight.value) {
    if (AirFlight.value[i].flyType == 1) {
      airList.value.push(AirFlight.value[i])
    }
  }
})

const list = ref([
  {
    name: '直升机',
    type: '罗宾逊R44',
    unit: '小飞通航'
  },
  {
    name: 'eVTOL',
    type: '亿航216',
    unit: '鹍航智能'
  },
  {
    name: '滑翔伞',
    type: '-',
    unit: '鸿鹄通航'
  }
])
const hangarList = ref([])
const navBar = ref('有人机列表')
const navList = ref(['有人机列表', '无人机列表'])

// 响应子组件点击tab
const clickNavBar = (item) => {
  navBar.value = item
  hangarList.value = props.operationData.hangarList
  list.value =
    navBar.value === '无人机列表' ? props.operationData.uavList : props.operationData.peopleUavList
}

onMounted(() => {
  //   list.value = props.operationData.peopleUavList
})

// watch(props, (val) => {
//   list.value = val.operationData.peopleUavList
// })
</script>
<template>
  <div class="card">
    <NavComponent :navBar="navBar" :navList="navList" @clickNavBar="clickNavBar"></NavComponent>
    <div class="table">
      <ul class="thead">
        <li>名称</li>
        <li>型号</li>
        <li>运营单位</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="list"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :delay="3"
          :limitScrollNum="5"
        >
          <li v-for="(item, index) in list" :key="index" @click="focusAir(item)">
            <el-tooltip effect="dark" :content="item.name" placement="top">
              <span class="content">{{ item.name }}</span>
            </el-tooltip>
            <p>{{ item.type }}</p>
            <el-tooltip effect="dark" :content="item.name" placement="top">
              <span class="content">{{ item.unit }}</span>
            </el-tooltip>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>

    <!-- <div class="table" v-else>
      <ul class="thead">
        <li>名称</li>
        <li>状态</li>
        <li>航线占用</li>
        <li>停靠无人机</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="hangarList"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :delay="3"
          :limitScrollNum="4"
        >
          <li v-for="(item, index) in hangarList" :key="index" @click="showHangarInfo(item)">
            <el-tooltip effect="dark" :content="item.name" placement="top">
              <span class="content">{{ item.name }}</span>
            </el-tooltip>
            <p class="d-f">
              <span class="on-line" v-if="item.status === 0">在线</span>
              <span class="off-line" v-else>离线</span>
            </p>
            <p>
              <span>{{ item.skipLineLocked === 1 ? '占用' : '未占用' }}</span>
            </p>
            <p>
              <span>{{ item.latestParkDrone || ' ' }}</span>
            </p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div> -->
  </div>
</template>
<style scoped lang="scss">
.card {
  .table {
    width: 100%;
    padding: 0 10px;

    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;
      }
    }

    .tbody {
      height: 175px;
      overflow: hidden;
      li {
        display: flex;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;
        text-align: center;
        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }
        P {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;

          .type {
            width: 67px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(0, 213, 255, 0.25);
            border-radius: 2px;
            border: 1px solid #00d5ff;
          }
        }
      }
      .content {
        display: block;
        width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .conbox {
    padding: 2px 15px 10px;
    .navbox {
      display: flex;
      align-items: center;

      p {
        flex: 1;
        padding: 5px 0 10px;
        font-size: 15px;
        opacity: 0.7;
        text-align: center;
        cursor: pointer;
        background-size: 100% 3px;

        &.active {
          opacity: 1;
          position: relative;
          background-size: 120% 20px;
          background: linear-gradient(to bottom, #00d8aa 0%, #00e2ff 100%);
        }
      }
    }
  }
}
.d-f {
  display: flex;
  flex-direction: column;
}
.yes {
  display: block;
  width: 40px;
  height: 40px;
  background: url('@img/operation/yes-icon.png');
  background-size: 100% 100%;
  // text-align: center;
  color: #fff;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 12px;
  // line-height: 20px;
}
.no {
  display: block;
  width: 40px;
  height: 40px;
  background: url('@img/operation/no-icon.png');
  background-size: 100% 100%;
  text-align: center;
  color: #fff;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 12px;
  line-height: 20px;
}
.on-line {
  width: 37px;
  height: 18px;
  line-height: 18px;
  background: rgba(0, 255, 15, 0.25);
  border-radius: 4px;
  border: 1px solid #51ffb2;
  padding: 0 2px;
  margin-top: -8px;
}
.off-line {
  width: 33px;
  height: 18px;
  line-height: 18px;
  background: rgba(255, 0, 0, 0.25);
  border-radius: 4px;
  border: 1px solid #f77575;
  margin-top: -8px;
}
</style>
